<template>
    <div class="el-scrollbar__wrap" v-loading="loading">
      <div class="el-scrollbar__view">
        <div id="all">
          <div id="head">
            <div id="logo">
            <img src="../../../../../assets/img/logo.jpg"/>
            <p class="tet">学生德育评价平台系统欢迎您</p>
            </div>
            <div id="headRight">
              <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1"><a href="#" target="_self">&nbsp;&nbsp;&nbsp;首页</a></el-menu-item>
                <el-menu-item index="2"><a href="http://www.dqsy.net/" target="_blank">了解学校</a></el-menu-item>
              </el-menu>
            </div>
          </div>
          <!-- 图片格式尽量是1300*480 -->
          <div id="slideshow">
              <el-carousel indicator-position="outside" :height="bannerHeight + 'px'">
                <el-carousel-item v-for="item in dataList" :key="item.id">
                  <img ref="bannerHeight" :src="item.view" @load="imgLoad" style="width: 100%">
                </el-carousel-item>
              </el-carousel>
          </div>
          <!-- <div id="content"> -->
            <!-- <div id="content_left">
              <h1>育德一角</h1>
              <p>给有图所展示的照片大致介绍</p>
            </div> -->
            <!-- 图片尽量是200*150 -->
           <!-- <div id="content_right">
              <img src="//17840982.s61i.faiusr.com/2/AD0I1vbACBACGAAggO_13gUo9t_UxwYwkAM4mgI.jpg" />
              <img src="//17840982.s61i.faiusr.com/2/AD0I1vbACBACGAAggO_13gUohYHf-AcwkAM4mgI.jpg"/>
              <img src="//17840982.s61i.faiusr.com/2/AD0I1vbACBACGAAg9u613gUo4ODS1wIwkAM4mgI.jpg"/>
              <img src="//17840982.s61i.faiusr.com/2/AD0I1vbACBACGAAghe_13gUoisWpXTCQAziaAg.jpg"/>
            </div> -->
          <!-- </div> -->
          <div id="major">
          <h1>MAJOR FUNCTION</h1>
          <h3>主要功能</h3>
          <p></p>
          <div id="majorFunction">
            <div id="inform" @click="toGo('/notify/OaNotifyList')">通知发布</div>
            <div id="record" @click="toGo('/moredumain/StudentMoreduMainList')">学生德育档案</div>
            <div id="flowPath" @click="initiateProcess()">德育档案学年终审</div>
            <div id="personalInformation" @click="toGo('/sys/user/UserInfo')">个人信息</div>
          </div>
          </div>
          <div id="bottom">

          </div>
        </div>
      </div>
      <ProcessList ref="ProcessList" v-show='false'></ProcessList>
    </div>
</template>

<script>
    import ProcessList from '../../../flowable/task/ProcessList.vue'
    export default {
      name: 'Analysis',
      components: {
        ProcessList
      },
      data () {
        return {
          row: {
            id: 'Process_1643283220416:11:2a91ec6f-c5ed-11ec-8043-5aa0235c9298',
            key: 'Process_1643283220416',
            name: '德育档案学年终审'
          },
          loading: false,
          activeIndex: '1',
          activeIndex2: '1',
          bannerHeight: null,
          dataList: [{
            id: 0,
            view: require('../../../../../assets/new/show2.png')
          },
          {
            id: 1,
            view: require('../../../../../assets/new/show1.png')
          },
          {
            id: 2,
            view: require('../../../../../assets/new/show3.png')
          },
          {
            id: 3,
            view: require('../../../../../assets/new/show4.png')
          },
          // {
          //   id: 4,
          //   view: require('../../../../../assets/new/SHOW5.png')
          // },
          // {
          //   id: 5,
          //   view: require('../../../../../assets/new/SHOW7.png')
          // },
          {
            id: 6,
            view: require('../../../../../assets/new/show6.png')
          }]
        }
      },
      mounted () {
        this.imgLoad()
        window.addEventListener('resize', () => {
          this.imgLoad()
        }, false)
      },
      methods: {
        // 开始流程
        initiateProcess () {
          this.$refs.ProcessList.start(this.row)
          this.loading = true
          setTimeout(() => {
            this.loading = false
          }, 3000)
        },
        toGo (path) {
          this.$router.push(path)
        },
        imgLoad () {
          this.$nextTick(() => {
            let ref = this.$refs
            this.bannerHeight = ref.bannerHeight && ref.bannerHeight.length ? ref.bannerHeight[0].height : ''
          })
        }
      }
    }
</script>

<style scoped lang="less">
    *{
      margin: 0;
      padding: 0;
    }
    a{
      color:#000;text-decoration:none
    }
    a:hover{
      text-decoration:none
    }
      .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
      }
      .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
      }

      .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
      }
    .el-scrollbar__wrap{
      background-color: #FFFFFF;
      // width: 1300px;
      // margin: 0 auto;
    }
    #all{
      // width: 75%;
      // margin: 0 auto;
    }
    #head{
      height: 100px;
      background-color: #FFFFFF;
    }
    #head li{
      margin-right: 20px;
      font-size: 20px;
    }
    #logo img{
      height: 100px;
      float: left;
      margin-left: 40px;
    }
    .w3{
      width: 300px;
    }
    .tet{
      float: left;
      font-size: 30px;
      line-height: 100px;
      margin-left: 50px;
    }
    #headRight{
      float: right;
      height: 100px;
      width: 280px;
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
    .is-animating img{
      width: 100%;
     }
    #content{
      margin-top: 150px;
      display: flex;
      justify-content: space-between;
    }
    #content_left{
      margin-top: 100px;
      // float: left;
      width: 450px;
      padding: 0 100px;
      height: 450px;
      background-color: #f9253b;
      border: 1px red solid;
      border-top-right-radius : 15px;
      border-bottom-right-radius: 15px;
      box-shadow: 10px 10px 5px #fcced2;
      color: #FFFFFF;
    }
    #content_left h1{
      margin-top: 40px;
      font-family: "Microsoft YaHei";
      font-size: 43px;
      font-weight: 500 ;
    }
    #content_left p{
      margin-top: 100px;
    }
    #content_right{
      // float: right;
      width: 700px;
      height: 600px;
    }
    #content_right img{
      width: 300px;
      margin-right: 20px;
      margin-bottom:20px ;
      overflow: hidden;
    }
    #content_right img:hover{
      transform: scale(1.01);
    }
    #major{
      text-align: center;
      margin-top: 80px;
    }
    #major h1{
      color: #f2f2f2;
      font-weight: 500;
      font-size: 35px;
    }
    #major h3{
      margin-top: 20px;
      font-weight: 500;
      font-size: 25px;
    }
    #major p{
      margin-top: 80px;
      color: rgba(153,153,153,1);
    }
    #majorFunction{
      display: flex;
      flex-wrap: nowrap;
      position: relative;
      justify-content: center;
      width: 100%;
      height: 480px;
      cursor:pointer;
    }
    #inform{
      height: 300px;
      width: 100%;
      background: url(../../../../../assets/img/background2.jpg) no-repeat;
    }
    #record{
      height: 300px;
      width: 100%;
      background: url(../../../../../assets/img/background1.jpg) no-repeat;
    }
    #flowPath{
      height: 300px;
      width: 100%;
      background: url(../../../../../assets/img/background3.jpg) no-repeat;
    }
    #personalInformation{
      height: 300px;
      width: 100%;
      background: url(../../../../../assets/img/background4.jpg) no-repeat;
    }
    a{
      text-decoration: none;
    }
    #majorFunction div {
      color: #FFFFFF;
      font-size: 25px;
      line-height: 300px;
    }
</style>
